<template>
    <div class="container">
        <!-- 头部 -->
        <van-nav-bar 
        title='了解躺猪网' 
        left-text="返回" 
        left-arrow
        @click-left="onClickLeft">
            <template #right>
                <div @click="toUser" class="nav-img"><img src="../assets/user.png" ></div>
            </template>
        </van-nav-bar>
        <!-- 主要内容 -->
        <div class="content">
            <div class="hd">
                <div class="pic">
                    <img src="../assets/project-logo.png" alt="">
                </div>
                <div class="text">
                    <p>
                        <span class="text-specical">躺猪网</span>
                    由长沙二咸数字科技有限公司自主研发推出，是互联网垂直领域门户网站www.tangzhezu.com及微信小程序app为依托，
                    以移动互联网驱动零星资产的智慧租赁平台，用数字科技赋能传统招商与租赁行业，
                    重塑人、铺、客、数据的交互，让线上线下共生共融于平台，打造“新租赁”品质服务生态。
                    躺猪网致力于为商家、商户、业主提供全方位租赁服务。
                    </p>
                    <p>
                        未来，躺猪网将完成全行业全城推广,<span class="text-specical">100000+</span>
                        职业经纪人树状式覆盖各大区域，为<span class="text-specical">1000+</span>
                        连锁品牌选址赋能，驱动行业进入汇聚科学算法的人工智能“新租赁”时代。
                    </p>
                </div>
            </div>
            <div class="content-title">
                <div class="title">角色定位</div>
                <div class="title-child">以数字科技驱动的零星资产智慧租赁平台</div>
                <div class="wrap-list">
                   <div class="wrap">
                        <div class="wrap-item">招商</div>
                        <div class="wrap-item">选址</div>
                        <div class="wrap-item">转让</div>
                        <div class="wrap-item">托管</div>
                        <div class="wrap-item">租后服务</div>
                   </div>
                </div>
            </div>
            <div class="bd">
                <div class="bd-item">
                    <div class="title">
                        <div class="title-num">01</div>
                        <div class="title-text">招商运营</div>
                    </div>
                    <div class="text">
                        无需额外组建招商团队，躺猪核心团队有超十年的商业运营管理经验； 更多优质品牌和专业经纪人入驻平台，缩减招商成本,利用平台资源互补, 合作共赢；颠覆传统资产租赁模式，整合线上资源，促成更优效果
                    </div>
                </div>
                <div class="bd-item">
                    <div class="title">
                        <div class="title-num">02</div>
                        <div class="title-text">赋能合作</div>
                    </div>
                    <div class="text">
                        强大的品牌方、租后服务供应商、招商渠道， 汇聚垂直门户网站、微信小程序APP及各大渠道推广 赋能， 以商业管理科技化手段给予用户战
                    </div>
                </div>
                <div class="bd-item">
                    <div class="title">
                        <div class="title-num">03</div>
                        <div class="title-text">优质服务</div>
                    </div>
                    <div class="text">
                        为租户提供全面、及时、真实的商铺信息。免费的门户网站推广、合作渠道推广，线上线下协同服 务，提供商铺租赁解决方案，从铺源发布到
                        租户成交一条龙完美对接
                    </div>
                </div>
                <div class="bd-item">
                    <div class="title">
                        <div class="title-num">04</div>
                        <div class="title-text">招商运营</div>
                    </div>
                    <div class="text">
                        不收取任何前置费用，安全可靠，在线化履约,无效果不付费。 保证互联网金融服务每个交易环节安全透明
                    </div>
                </div>
            </div>
        </div>
        <foot-message></foot-message>
    </div>
</template>
<script>
import FootMessage from '@/components/foot-message/index.vue'
import { mapActions, mapState } from 'vuex';
export default {
    components:{
        FootMessage
    },
    data(){
        return{

        }
    },
    computed:{
        ...mapState(["turnOpen"])
    },
    methods:{
        ...mapActions(["saveRouter"]),
        // 返回上一页面
        onClickLeft(){
            // this.$router.go(-1);
            if(this.turnOpen==0){
                this.$router.go(-1);
            }else{
                this.$router.push({path:'/home'})
                this.saveRouter(0)
            }
        },
        // 去用户信息
		toUser(){
			this.$router.push({path:"/user"})
		},
    }
}
</script>
<style lang="less" scoped>
/// 顶部样式
/deep/.van-nav-bar__text{
	color: #333;
}
/deep/.van-nav-bar{
	.van-icon{
		color: #333;
	}
}
.nav-img{
	img{
		width: 0.34rem;
		height: 0.34rem;
	}
}
// 主要内容
.hd{
    display: flex;
    align-items: center;
    padding: 0 0.45rem;
    .pic{
        width: 2rem;
        height: 0.5rem;
        padding-right: 0.36rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .text{
        flex: 1;
        font-size: 0.2rem;
        letter-spacing: 2px;
        color: #767575;
        .text-specical{
            font-weight: 600;
            font-size: 0.32rem;
            color: #FF8A00;
        }
    }
}
// 标题
.content-title{
    background-color: #F9F9FA;
    text-align: center;
    padding: 0.2rem 0;
    color: #333333;
    .title{
        font-weight: 600;
        font-size: 0.36rem;
    }
    .title-child{
        font-size: 0.24rem;
        padding-top: 0.2rem;
        position: relative;
    }
    .title-child::before{
        display: block;
        content: "";
        position: absolute;
        height: 1px;
        width: 0.85rem;
        background-color: #FF8A00;
        left: 50%;
        transform: translate(-50%,0);
        bottom: -0.25rem;
    }
}
.wrap{
    display: flex;
    padding: 0 0.2rem;
    margin-top: 0.55rem;
    .wrap-item{
        width:20%;
        border-radius: 0.3rem;
        font-size: 0.2rem;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F92D37;
        height: 0.45rem;
        margin: 0 0.15rem;
    }
}
// 展示栏
.bd{
    padding:  0 0.5rem;
    padding-bottom: 1rem;
}
.bd-item{
    margin-top: 0.5rem;
    .title{
        display: flex;
        font-size: 0.28rem;
        align-items: center;
        margin: 0.2rem 0;
        .title-num{
            width: 0.45rem;
            height: 0.45rem;
            background-color: #F92D37;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 600;
            color: #fff;
            margin-right: 0.1rem;
        }
    }
    .text{
        font-size: 0.24rem;
        color: #767575;
    }
}
</style>